<template>
    <div class="wrap">
        <!-- 头部banner -->
        <!-- <div class="top">
<van-row gutter="32">
  <van-col span="8"><van-icon name="arrow-left" /></van-col>
  <van-col span="8">理财精选</van-col>
  <van-col span="8"><van-icon name="ellipsis" /></van-col>
</van-row>
</div> -->

            <header>
                  <button @click="$router.go(-1)" class="back-button">&lt;</button>
                  <h1>理财精选</h1>
                  <button class="more-button">···</button>
                </header>
        <!-- 理财产品地图 -->
        <router-link to="/axis">
            <div class="container1">
                <div class="title1">下拉体验理财产品地图</div>
                <div class="arrow1"><img src="./assets/下拉.svg" alt=""></div>
                <div class="footer1">
                    <span class="highlight1">理财优选</span>
                    <span class="subtext1">登陆后可查看个性化定制推荐</span>
                </div>
            </div>
        </router-link>
        <!-- 底部 -->
        <div class="bottom1">
            <van-row :gutter="[0, 20]">
                <van-col span="24">
                    <router-link to="/ProductDetails1">
                        <div class="box1">
                            <div class="title">1</div>
                            <div class="subtitle">宁波通商银行“通银丰利”系列安心成长理财（周周赢）个人理财计划<br>AXCZL01-0003</div>
                            <div class="info">
                                <div>
                                    <div class="rate">2.61%</div>
                                    <div class="label">业绩比较基准</div>
                                </div>
                                <div>
                                    <div class="unit-value">1.1916</div>
                                    <div class="label">最新单位净值</div>
                                </div>
                                <div>
                                    <div class="highlight">7天</div>
                                    <div class="label">投资周期</div>
                                </div>
                            </div>
                            <div class="info">
                                <div>
                                    <div class="unit-value">二级(中低风险)</div>
                                    <div class="label">风险等级</div>
                                </div>
                                <div>
                                    <div class="unit-value">10000.00</div>
                                    <div class="label">起购金额</div>
                                </div>
                                <div>
                                    <div class="amount">66836369.50</div>
                                    <div class="label">剩余金额(元)</div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </van-col>
                <van-col span="12">
                    <router-link to="/ProductDetails2">
                        <div class="box2">
                            <div class="container2">
                                <div class="title2">2</div>
                                <div class="subtitle2">南银理财优稳日申月赎</div>
                                <div class="info2">
                                    <div>
                                        <div class="rate2">7天通知存款基准利率</div>
                                        <div class="label2">业绩比较基准</div>
                                    </div>
                                </div>
                                <div class="info2">
                                    <div>
                                        <div class="unit-value2">1.1402</div>
                                        <div class="label2">最新单位净值</div>
                                    </div>
                                    <div>
                                        <div class="unit-value2">1.00</div>
                                        <div class="label2">起购金额</div>
                                    </div>
                                </div>
                                <div class="info2">
                                    <div>
                                        <div class="unit-value2">每日开放</div>
                                        <div class="label2">投资周期</div>
                                    </div>
                                    <div>
                                        <div class="unit-value2">中低风险</div>
                                        <div class="label2">风险等级</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </van-col>
                <van-col span="12">
                    <router-link to="/ProductDetails3">
                        <div class="box3">
                            <div class="container3">
                                <div class="title3">3</div>
                                <div class="subtitle3">杭银理财幸福99零钱包开放式理财D款</div>
                                <div class="info3">
                                    <div>
                                        <div class="rate3">1.6903%</div>
                                        <div class="label3 middle">近七日年化</div>
                                    </div>
                                </div>
                                <div class="info3">
                                    <div>
                                        <div class="unit-value3 text-p">1.0000</div>
                                        <div class="label3">最新单位净值</div>
                                    </div>
                                    <div>
                                        <div class="unit-value3 text-p">1.00</div>
                                        <div class="label3">起购金额</div>
                                    </div>
                                </div>
                                <div class="info3">
                                    <div>
                                        <div class="unit-value3">每日开放</div>
                                        <div class="label3">投资周期</div>
                                    </div>
                                    <div>
                                        <div class="unit-value3 left1">二级(中低风险)</div>
                                        <div class="label3 left2">风险等级</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>
                    <router-link to="/axis">
                        <div class="view-all">查看全部产品 >></div>
                    </router-link>
                </van-col>
            </van-row>
        </div>
        <!-- 定位 -->
        <div class="location" @click="dialogTableVisible = true">
            <img src="./assets/理财顾问模块.svg" alt="加载出错，请找lzb调试">
        </div>

        <el-dialog v-model="dialogTableVisible" width="200">
            <img class="dialog-img" src="./assets/弹窗.png" alt="加载出错，请找lzb调试" @click="dialogTableVisible = false">
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
const dialogTableVisible = ref(false)
</script>

<style scoped>
header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* padding-bottom: 16px; */
}

h1 {
    padding: 0 20px;
    font-size: 20px;
    /* font-weight: bold; */
    color: #444;
}

.back-button {
    position: absolute;
    left: 3px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.more-button {
    position: absolute;
    right: 2px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.wrap {
    width: 100%;
    height: 100%;
    background-image: url('./assets/背景图.svg');

}

/* 头部banner */
.top {
    height: 25px;
    position: relative;
    border: 6px solid transparent;
}

.top .van-icon-arrow-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%, -50%);

}

.top .van-icon-ellipsis {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%, -50%);

}

/* 理财产品地图 */
.container1 {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-image: url('./assets/半圆背景图.svg');
    background-size: 100%;
    background-position: over;
    background-repeat: no-repeat;
    margin-top: 0px;
}

.title1 {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
}

.arrow1 {
    color: #999;
    margin-bottom: 20px;
}

.arrow1 img {
    width: 8%;
    height: 8%;
}

.footer1 {
    font-size: 14px;
    color: #888;
    margin-left: -30%;
}

.highlight1 {
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
    color: #333;
    /* Adjusted color for the bold text */
}

.subtext1 {
    font-size: 14px;
    color: #9a918d;
    /* Adjusted color for the subtext */
}

/* 底部 */
.bottom1 {
    background-image: url('./assets/产品背景.svg');
    background-size: cover;
    /* 使图片覆盖整个 div */
    background-position: center;
    /* 居中对齐图片 */
    background-repeat: no-repeat;
    /* 避免图片重复 */
    width: 99%;
    height: auto;

}

.box1 {
    font-family: Arial, sans-serif;
    background-color: #f7f6ec;
    margin: 15px;
    margin-right: 5px;
    padding: 5px;
    border-radius: 20px;
    max-width: 600px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 24px;
    color: #c02624;
    font-weight: bold;
}

.subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.info div {
    text-align: center;
}

.rate {
    font-size: 32px;
    color: #c02624;
    font-weight: bold;
}

.unit-value,
.period,
.risk,
.amount {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 2px;
}

.label {
    font-size: 14px;
    color: #777;
}

.highlight {
    font-size: 16px;
    color: #333;
    margin-top: -28%;
    font-weight: bold;
}

.box2 {
    font-family: Arial, sans-serif;
    margin-top: -16%;
    /* margin-left: 3px; */
    padding: 10px;
    color: #333;
}

.container2 {
    background-color: #f5e4c5;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title2 {
    font-size: 20px;
    color: #e28f5a;
    font-weight: bold;
}

.subtitle2 {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
}

.info2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.info2 div {
    text-align: center;
}

.rate2 {
    font-size: 12px;
    color: #c02624;
    font-weight: bold;
    margin-left: 15px;
}

.unit-value2,
.risk2 {
    /* font-size: 10px; */
    font-weight: bold;
    margin-bottom: 3px;
}

.unit-value2 {
    font-size: 14px;
}

.label2 {
    font-size: 11px;
    color: #777;
    margin-bottom: 3px;
}

.box3 {
    font-family: Arial, sans-serif;
    margin-top: -15%;
    /* margin-left: 3px; */
    padding: 10px;
    color: #333;
}

.container3 {
    background-color: #e0f7fa;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title3 {
    font-size: 20px;
    color: blue;
    font-weight: bold;
}

.subtitle3 {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.info3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.info3 div {
    text-align: center;
}

.rate3 {
    font-size: 16px;
    color: #c02624;
    font-weight: bold;
    width: 100%;
    margin-left: 60%;
}

.middle {
    margin-left: 54%;
    width: 100%;
}

.unit-value3,
.risk3 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 3px;
}

.left1 {
    margin-left: 18%;
    width: 100%;
}

.left2 {
    margin-left: 18%;
    width: 100%;
}

.label3 {
    font-size: 11px;
    color: #777;
    margin-bottom: 3px;
}

.text-p {
    font-size: 14px;
}

.view-all {
    text-align: right;
    color: #777;
    font-size: normal;
    cursor: pointer;
    margin-bottom: 8%;
}

/* 定位 */
.location {
    margin-top: 30px;
}

.location img {
    width: 100%;
    height: 100%;
}

.dialog-img {
    width: 100%;
    height: 50%;

}
</style>